import MeIndexStyles from '../../../css/vender/me/meIndex.module.css'
import "../../../css/index.css"

import { List, Switch, Tag, Button } from 'antd-mobile'
import { Navigate, useNavigate } from 'react-router-dom'
//商户的我的页面
const VMe = () => {
    //跳转函数
    const navigate=useNavigate();
    return (
        <>
            <div>
                <div className={MeIndexStyles['userInfo']}>
                     <div className={MeIndexStyles['userLeft']}>
                          <div className={MeIndexStyles['userRound']}>彪记肉铺</div>
                     </div>

                     <div className={MeIndexStyles['userRight']}>
                     <List>
                    <List.Item  className='fontWB' >彪记肉铺</List.Item>
                    <List.Item  >16651737795</List.Item>
                </List>
                     </div>
                </div>
                <div className='tips salesDataTip MTS MBS'>
                    销售数据
                </div>
                <List>
                    <List.Item extra={<Tag color='primary'>7个</Tag>} className='fontWB' clickable  onClick={()=>{navigate("/vOrder")}}>订单数<Navigate>
                        </Navigate></List.Item>
                    <List.Item extra={<Tag color='danger'>￥888</Tag>} className='fontWB'>销售额</List.Item>
                    <List.Item extra={<Tag color='danger'>￥888</Tag>} className='fontWB'>实际金额</List.Item>
                    <List.Item extra={<Tag color='primary'>34件</Tag>} className='fontWB'>销售数量</List.Item>
                    <List.Item extra={<Tag color='primary'>1 种</Tag>} className='fontWB'>销售种类</List.Item>
                    <List.Item extra={<Tag color='primary'>4人</Tag>} className='fontWB'>下单人数</List.Item>
                </List>

                <div className='tips shopDataTip MTS MBS'>
                    商品数据
                </div>
                <List>
                    <List.Item extra={<Tag color='primary'>2 种</Tag>} clickable className='fontWB'  onClick={()=>{ navigate("/VShop/status/1")}}>商品数量</List.Item>
                    <List.Item extra={<Tag color='primary'>2 种</Tag>} clickable className='fontWB' onClick={()=>{ navigate("/VShop/status/1")}}>上架商品 </List.Item>
                    <List.Item extra={<Tag color='primary'>0 种</Tag>} clickable className='fontWB'  onClick={()=>{ navigate("/VShop/status/0")}}>未上架商品</List.Item>
                    <List.Item extra={<Tag color='primary'>200 件</Tag>} className='fontWB'>总库存</List.Item>
                    <List.Item extra={<Tag color='primary'>166 件</Tag>} className='fontWB'>剩余库存</List.Item>

                </List>
                <Button block color='primary' style={{ marginTop: 10 }}>新增商品</Button>
                <Button block color='danger' style={{ marginTop: 10 }} >解除绑定</Button>
            </div>

        </>
    )
}

export default VMe